// 列表区显示所有的物料
// key对应组件的映射关系
let sterConfig = Config()

function Config() {
    const componentList = [];
    const componentMap = {};
    return {
        componentList,
        componentMap,
        register: (component) => {
            componentList.push(component)
            componentMap[component.key] = component
        }
    }
}


const createInputConfig = (label) => ({ type: 'input', label })
const createColorProp = (label) => ({ type: 'color', label })
const createSelectProp = (label, options) => ({ type: 'select', label, options })
// 分开注册是因为每一个组件的配置项不一样, 所以需要分开注册
sterConfig.register({
    label: "文本",
    resize: {
        width: true, // 更改输入框的横向大小  
        height: true, // 更改输入框的纵向大小
    },
    preview: () => "预览文本",
    render: ({ props, size }) => <span style={{ color: props.color, fontSize: props.size, height: size.height + 'px', width: size.width + 'px' }}>{props.text || "渲染文本"}</span>,
    key: 'text',
    props: {
        text: createInputConfig('文本内容'),
        color: createColorProp('文本颜色'),
        size: createSelectProp('文本大小', [
            { label: '小', value: 'small' },
            { label: '中', value: 'medium' },
            { label: '大', value: 'large' },
        ])
    }
})

sterConfig.register({
    label: "按钮",
    resize: {
        width: true, // 更改输入框的横向大小  
        height: true, // 更改输入框的纵向大小
    },
    preview: () => <el-button>预览按钮</el-button>,
    render: ({ props, size }) => <el-button style={{ height: size.height + 'px', width: size.width + 'px' }} type={props.type} size={props.size}>{props.text || "渲染按钮"}</el-button>,
    key: "button",
    props: {
        text: createInputConfig('按钮内容'),
        type: createSelectProp('按钮类型', [
            { label: '基础', value: 'primary' },
            { label: '成功', value: 'success' },
            { label: '警告', value: 'warning' },
            { label: '危险', value: 'danger' },
            { label: '文本', value: 'text' },
        ]),
        size: createSelectProp('按钮大小', [
            { label: '默认', value: 'default' },
            { label: '中等', value: 'medium' },
            { label: '小型', value: 'small' },
            { label: '迷你', value: 'mini' },
        ])
    }
})

sterConfig.register({
    label: "输入框",
    resize: {
        width: true, // 更改输入框的横向大小
    },
    preview: () => <el-input placeholder="预览输入框" />,
    render: ({ size }) => <el-input style={{ width: size.width + "px" }} placeholder="渲染输入框" />,
    key: "input",
    props: {
        text: createInputConfig('按钮内容'),

    },
    model: {
        default: "绑定字段"
    }
});

sterConfig.register({
    label: "单选框",
    resize: {
        width: true, // 更改输入框的横向大小  
        height: true, // 更改输入框的纵向大小
    },
    preview: () => <el-radio value="1" size="large">Option 1</el-radio>,
    render: ({ size }) => <el-radio style={{ height: size.height + 'px', width: size.width + 'px' }} value="1" size="large">Option 1</el-radio>,
    key: "radio"
});

sterConfig.register({
    label: "复选框",
    resize: {
        width: true, // 更改输入框的横向大小  
        height: true, // 更改输入框的纵向大小
    },
    preview: () => <el-checkbox value="1" size="large">Option 1</el-checkbox>,
    render: ({ size }) => <el-checkbox style={{ height: size.height + 'px', width: size.width + 'px' }} value="1" size="large">Option 1</el-checkbox>,
    key: "checkbox"
})

sterConfig.register({
    label: "开关",
    resize: {
        width: true, // 更改输入框的横向大小  
        height: true, // 更改输入框的纵向大小
    },
    preview: () => <el-switch />,
    render: ({ size }) => <el-switch style={{ height: size.height + 'px', width: size.width + 'px' }} />,
    key: "switch"
})

sterConfig.register({
    label: '时间选择器',
    resize: {
        width: true, // 更改输入框的横向大小  
        height: true, // 更改输入框的纵向大小
    },
    preview: () => <el-time-picker style='width:100% ' placeholder="Arbitrary time" />,
    render: ({ size }) => <el-time-picker style={{ height: size.height + 'px', width: size.width + 'px' }} placeholder="Arbitrary time" />,
    key: "timePicker"
})

sterConfig.register({
    label: "颜色选择器",
    resize: {
        width: true, // 更改输入框的横向大小  
        height: true, // 更改输入框的纵向大小
    },
    preview: () => <el-color-picker />,
    render: ({ size }) => <el-color-picker style={{ height: size.height + 'px', width: size.width + 'px' }} />,
    key: "color",

})

sterConfig.register({
    label: "多行文本框",
    resize: {
        width: true, // 更改输入框的横向大小  
    },
    preview: () => <el-input type="textarea" placeholder="请输入内容" />,
    render: ({ size }) => <el-input style={{ width: size.width + 'px' }} type="textarea" placeholder="请输入内容" />,
    key: "textarea"
})

sterConfig.register({
    label: "数字输入框",
    resize: {
        width: true, // 更改输入框的横向大小  
        height: true, // 更改输入框的纵向大小
    },
    preview: () => <el-input-number min="1" max="10" />,
    render: ({ size }) => <el-input-number style={{ height: size.height + 'px', width: size.width + 'px' }} min="1" max="10" />,
    key: "inputNumber"
})

sterConfig.register({
    label: "评分",
    resize: {
        width: true, // 更改输入框的横向大小  
        height: true, // 更改输入框的纵向大小
    },
    preview: () => <el-rate />,
    render: ({ size }) => <el-rate style={{ height: size.height + 'px', width: size.width + 'px' }} />,
    key: "rate"
})

sterConfig.register({
    label: '滑块',
    preview: () => <el-slider />,
    render: () => <el-slider />,
    key: "slider"
})

sterConfig.register({
    label: "时间选择",
    preview: () => <el-time-select placeholder="Arbitrary time" />,
    render: () => <el-time-select placeholder="Arbitrary time" />,
    key: "timeSelect"
})

sterConfig.register({
    label: "进度条",
    preview: () => <el-progress />,
    render: () => <el-progress />,
    key: "progress"
})

sterConfig.register({
    label: "Tag",
    preview: () => <el-tag type="primary">Tag 1</el-tag>,
    render: () => <el-tag type="primary">Tag 1</el-tag>,
    key: "tag"
})

sterConfig.register({
    label: "锚点",
    resize: {
        width: true, // 更改输入框的横向大小  
        height: true, // 更改输入框的纵向大小
    },
    preview: () => <el-affix>
        <el-button type="primary">Offset top 120px</el-button>
    </el-affix>,
    render: ({ size }) => <el-affix style={{ height: size.height + 'px', width: size.width + 'px' }}>
        <el-button>锚点</el-button>
    </el-affix>,
    key: "anchor"
})

sterConfig.register({
    label: "数字输入框",
    resize: {
        width: true, // 更改输入框的横向大小  
        height: true, // 更改输入框的纵向大小
    },
    preview: () => <el-input-number />,
    render: ({ size }) => <el-input-number style={{ height: size.height + 'px', width: size.width + 'px' }} min="1" max="10" />,
    key: "inputNumber"
})

sterConfig.register({
    label: "分割线",
    resize: {
        width: true, // 更改输入框的横向大小  
        height: true, // 更改输入框的纵向大小
    },
    preview: () => <el-divider border-style="dashed" />,
    render: ({ size }) => <el-divider style={{ height: size.height + 'px', width: size.width + 'px' }} border-style="dashed" />,
    key: "divider"
})

export { sterConfig }